<template>
	<div>
		<el-dialog title="编辑" v-model="isShowDialog" width="800px" @close="closeDialog">
			<el-form ref="formRef" :model="formModel" :inline="true" :rules="formRules" size="default" label-width="120px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="任务名称" prop="taskName">
							<el-input v-model="formModel.taskName" show-word-limit maxlength="50" placeholder=""
								clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="任务类型" prop="taskType">
							<el-select v-model="formModel.taskType" placeholder="">
								<el-option v-for="item in DictInfo.taskType" :key="item.key" :label="item.label"
									:value="item.key" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="源库" prop="sourceDatabase">
							<DatabaseSelect :default-value="formModel.sourceDatabase" @on-select="onSelectSourceDatabase">
							</DatabaseSelect>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="目标库" prop="targetDatabase">
							<DatabaseSelect :default-value="formModel.targetDatabase" @on-select="onSelectTargetDatabase">
							</DatabaseSelect>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="脚本" prop="scriptId">
							<TaskScriptSelect :default-value="formModel.scriptId" @on-select="onSelectScriptId">
							</TaskScriptSelect>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="查询分页数" prop="dataOffset">
							<el-input-number v-model="formModel.dataOffset" :min="1" :max="100000" placeholder=""
								clearable></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="目标表" prop="targetTable">
							<el-input v-model="formModel.targetTable" show-word-limit maxlength="100" placeholder=""
								clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="操作类型" prop="targetOperateType">
							<el-select v-model="formModel.targetOperateType" placeholder="">
								<el-option v-for="item in DictInfo.targetOperateType" :key="item.key" :label="item.label"
									:value="item.key" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="执行前是否清数" prop="clearByBefore">
							<el-select v-model="formModel.clearByBefore" placeholder="">
								<el-option v-for="item in DictInfo.yesOrNo" :key="item.key" :label="item.label"
									:value="item.key" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="备注" prop="remark">
							<el-input v-model="formModel.remark" style="width: 600px;" :rows="2" type="textarea"
								show-word-limit maxlength="500" placeholder="" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<el-divider v-if="formModel.taskType === 2" content-position="left">字段映射配置</el-divider>
			<FieldsList ref="fieldsRef" v-if="formModel.taskType === 2" :data="formModel.fieldList"></FieldsList>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="() => closeDialog()" size="default">取 消</el-button>
					<el-button type="primary" :loading="submitLoading" @click="onSubmit" size="default">提 交</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent, ref, inject } from 'vue';
import type { FormInstance } from 'element-plus';
import { TaskInfoEditParamModel, TaskInfoDetailModel, FieldUpdateModel } from '/@/interfaces/DataPipelineModel';
import { handleEdit, handleValidateForm } from '../task-info-wrap';
import useObjectUtil from '/@/utils/objectUtil';
import { DictInfo } from '/@/enums/dict-info-enum';
import DatabaseSelect from '/@/views/database-info/component/database-select.vue';
import TaskScriptSelect from '/@/views/task-script/component/task-script-select.vue';
import FieldsList from './fields-list.vue';

interface State {
	isShowDialog: boolean | true,
	submitLoading: boolean | false,
	formModel: TaskInfoEditParamModel,
	formRules: { [key: string]: any[] },
	selectDictType: {},
}
export default defineComponent({
	name: 'TaskInfoEdit',
	components: { DatabaseSelect, TaskScriptSelect, FieldsList },
	emits: ['onClose'],
	setup(props, context) {
		const state = reactive<State>({
			isShowDialog: true,
			submitLoading: false,
			formModel: {
				id: undefined,
				taskName: undefined,
				taskType: undefined,
				sourceDatabase: undefined,
				scriptId: undefined,
				dataOffset: undefined,
				targetDatabase: undefined,
				targetTable: undefined,
				targetOperateType: undefined,
				clearByBefore: undefined,
				remark: undefined,
				fieldList: [],
			},
			formRules: {
				taskName: [{ required: true, message: '任务名称不能为空', trigger: 'change' }],
				taskType: [{ required: true, message: '任务类型不能为空', trigger: 'change' }],
				sourceDatabase: [{ required: true, message: '源库不能为空', trigger: 'change' }],
				scriptId: [{ required: true, message: '脚本不能为空', trigger: 'change' }],
				dataOffset:[{ required: true, message: '查询分页数不能为空', trigger: 'change' }],
				targetDatabase: [{ required: true, message: '目标库不能为空', trigger: 'change' }],
				targetTable: [{ required: true, message: '目标表不能为空', trigger: 'change' }],
				targetOperateType: [{ required: true, message: '操作类型不能为空', trigger: 'change' }],
				clearByBefore: [{ required: true, message: '执行前是否清数不能为空', trigger: 'change' }]
			},
			selectDictType: {},
		});
		const methodMap = reactive({
			// 关闭弹窗
			closeDialog: function () {
				state.isShowDialog = false;
				context.emit('onClose');
			},
			// 提交
			onSubmit: async function () {
				state.submitLoading = true;
				setTimeout(() => state.submitLoading = false, 3000);
				// 表单验证
				let validate = await handleValidateForm(formRef.value);
				if (!validate) {
					state.submitLoading = false;
					return;
				}
				const fieldList: FieldUpdateModel[] = []
				const dataList = fieldsRef.value.handleLoadData();
				if (dataList.length > 0) {
					dataList.forEach((item: any) => {
						let fieldParam: FieldUpdateModel = {
							id: undefined,
							taskId: undefined,
							sourceField: undefined,
							idFlag: undefined,
							targetField: undefined,
							expression: undefined,
							remark: undefined,
						};
						useObjectUtil.copyProperties(item, fieldParam);
						fieldList.push(fieldParam);
					})
				}
				state.formModel.fieldList = [...fieldList];
				// 提交
				await handleEdit({ param: state.formModel, pageInfo: undefined }, methodMap.closeDialog);
			},
			onSelectSourceDatabase: function (value: string) {
				if (value) {
					state.formModel.sourceDatabase = value;
				}
			},
			onSelectTargetDatabase: function (value: string) {
				if (value) {
					state.formModel.targetDatabase = value;
				}
			},
			onSelectScriptId: function (value: string) {
				if (value) {
					state.formModel.scriptId = value;
				}
			},
		});
		// 表单赋值
		const detailData: TaskInfoDetailModel | undefined = inject<TaskInfoDetailModel>('detailData');
		if (undefined !== detailData) {
			useObjectUtil.copyProperties(detailData, state.formModel);
		} else {
			console.error("found undefined for detail");
		}
		const formRef = ref<FormInstance>();
		const fieldsRef = ref();
		return {
			DictInfo,
			formRef,
			fieldsRef,
			...toRefs(state),
			...toRefs(methodMap),
		};
	},
});
</script>
